<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录成功 - Spring Security OAuth2</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .main-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .success-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 3rem;
            text-align: center;
            max-width: 600px;
            width: 100%;
            margin: 20px;
            animation: slideInUp 0.8s ease-out;
        }
        
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .success-icon {
            width: 120px;
            height: 120px;
            background: linear-gradient(45deg, #28a745, #20c997);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 2rem;
            font-size: 4rem;
            color: white;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .welcome-message {
            margin-bottom: 2rem;
        }
        
        .user-info {
            background: rgba(40, 167, 69, 0.1);
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: 2px solid rgba(40, 167, 69, 0.2);
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }
        
        .feature-item {
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .feature-item:hover {
            transform: translateY(-5px);
            border-color: #667eea;
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }
        
        .feature-icon {
            font-size: 2.5rem;
            color: #667eea;
            margin-bottom: 1rem;
        }
        
        .action-buttons {
            margin-top: 2rem;
        }
        
        .action-buttons .btn {
            margin: 0.5rem;
            border-radius: 25px;
            padding: 12px 25px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        
        .countdown {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 1rem;
        }
    </style>
</head>

<body>
    <div class="main-container">
        <div class="success-card">
            <!-- 成功图标 -->
            <div class="success-icon">
                <i class="fas fa-check"></i>
            </div>
            
            <!-- 欢迎信息 -->
            <div class="welcome-message">
                <h1 class="text-success mb-3">
                    <i class="fas fa-party-horn me-2"></i>
                    登录成功！
                </h1>
                <p class="lead text-muted">
                    恭喜您，已成功通过OAuth2单点登录验证
                </p>
            </div>
            
            <!-- 用户信息 -->
            <div class="user-info">
                <h5 class="text-success mb-3">
                    <i class="fas fa-user-check me-2"></i>
                    欢迎回来
                </h5>
                <p class="mb-2">
                    <strong>用户名:</strong>
                    <span th:text="${#authentication.name}" class="text-primary ms-2">用户名</span>
                </p>
                <p class="mb-0">
                    <strong>登录时间:</strong>
                    <span class="text-info ms-2" id="loginTime">刚刚</span>
                </p>
            </div>
            
            <!-- 功能特性 -->
            <div class="feature-grid">
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h6>安全认证</h6>
                    <small class="text-muted">企业级OAuth2安全保障</small>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h6>单点登录</h6>
                    <small class="text-muted">一次登录，全平台通用</small>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h6>统一管理</h6>
                    <small class="text-muted">集中化用户权限管理</small>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="action-buttons">
                <a href="/" class="btn btn-primary btn-lg">
                    <i class="fas fa-home me-2"></i>
                    进入首页
                </a>
                <a href="/user" class="btn btn-outline-info">
                    <i class="fas fa-user me-2"></i>
                    查看详细信息
                </a>
                <a href="/resource" class="btn btn-outline-success">
                    <i class="fas fa-database me-2"></i>
                    访问资源
                </a>
            </div>
            
            <!-- 操作提示 -->
            <div class="countdown">
                <i class="fas fa-info-circle me-1"></i>
                <span>请选择您要进行的操作</span>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 设置登录时间
            const now = new Date();
            $('#loginTime').text(now.toLocaleString('zh-CN'));
            
            // 移除自动跳转功能，用户可以手动选择操作
            
            // 添加一些庆祝效果
            setTimeout(function() {
                createConfetti();
            }, 500);
        });
        
        // 简单的庆祝效果
        function createConfetti() {
            const colors = ['#667eea', '#764ba2', '#28a745', '#ffc107', '#dc3545'];
            for (let i = 0; i < 20; i++) {
                setTimeout(function() {
                    const confetti = $('<div>')
                        .css({
                            position: 'fixed',
                            top: '-10px',
                            left: Math.random() * 100 + '%',
                            width: '10px',
                            height: '10px',
                            background: colors[Math.floor(Math.random() * colors.length)],
                            borderRadius: '50%',
                            pointerEvents: 'none',
                            zIndex: 9999
                        })
                        .appendTo('body');
                    
                    confetti.animate({
                        top: '100vh',
                        left: '+=' + (Math.random() * 200 - 100) + 'px'
                    }, 3000, function() {
                        confetti.remove();
                    });
                }, i * 100);
            }
        }
    </script>
</body>
</html> 